<html>
<head>
    <title>课表</title>
    <meta name="viewport" content="width=device-width" charset="utf-8">
    <style>
        *{
            padding: 0;
            margin: 0;}
    body{
        background: #fff;
        text-align: center;
        padding-top: 100px;
        font-size: 20px;
        line-height: 36px;
        font-family:幼圆;
    }
        .tip{
            position: absolute;
            top: 10px;
            width: 100%;
            font-size: 14px;
            color: #aaaaaa;
        }
        .content{
            width: 80%;
            margin:0 auto;
            padding-left: 20px;
        }
        .time{
            float: left;
            position: absolute;
            left: 20px;
            font-weight: 100;
        }
        .room{
            float: right;
            position: absolute;
            right: 10px;
            font-weight:100;
        }
        .notice{

        }
        .notice a{
            margin-top: 10px;
            position: absolute;
            left: 70px;
            background: rgb(255, 100, 0);
            font-size: 14px;
            line-height: 14px;
            padding: 2px 4px 0 4px;
            border-radius: 2px;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div  id="content" class="content"></div>
<div class="tip">tip: 左右滑动以切换日期(仅支持移动端)</div>
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    var obj=document.getElementById("content");
    var date=new Date(),week;
    var cns=new Array("天","一","二","三","四","五","六");
    var content="今天...星期...星期...星期...";
    show(0);
    touch();
    function touch() {
        document.addEventListener("touchstart",function () {
            start=event.targetTouches[0].pageX;
        });
        document.addEventListener("touchend",function () {
            end=event.changedTouches[0].pageX;
            x=end-start;
            /*判断滑动事件*/
            x<-40?show(1):x<40?x:show(-1);
        });
    }
    function show(e) {
        window.console.log("容器高度:"+$("content").offsetHeight);
        e==-1&&date.setDate(date.getDate()-1);
        e==1&&date.setDate(date.getDate()+1);
        week=date.getDay();
        switch (week){
            case 0:content="班会，看，通知。";break;
            case 1:content="<div id='c1'><span class='time'>08:30</span> 概率论 &nbsp <span class='room'>211</span></div>" +
                "<div id='c2'><span class='time'>10:30</span> 操作系统 <span class='room'>314</span><br></div>" +
                "<div id='c3'><span class='time'>14:00</span> javaWeb <span class='room'>304</span></div>";break;
            case 2:content="<div id='c1'><span class='time'>08:30</span> 概率论 &nbsp <span class='room'>222</span></div>" +
                "<div id='c2'><span class='time'>10:30</span> 数据结构 <span class='room'>215</span></div>" +
                "<div id='c3'><span class='time'>14:00</span> <span class='notice'><a>单周</a></span>心理健康 <span class='room'>301</span></div>" +
                "<div id='c4'><span class='time'>14:00</span> <span class='notice'><a>9~单周</a></span>职业指导 <span class='room'>201</span></div>" +
                "<div id='c5'><span class='time'>18:30</span> <span class='notice'><a>~8单周</a></span>创新创业 <span class='room'>204</span></div>";break;
            case 3:content="<div id='c1'><span class='time'>07:20</span> 早 自 习&nbsp <span class='room'>307</span></div>" +
                "<div id='c2'><span class='time'>08:30</span> 软件工程 <span class='room'>213</span></div>" +
                "<div id='c3'><span class='time'>10:30</span> 面向对象 <span class='room'>401</span></div>";break;
            case 4:content="<div id='c1'><span class='time'>07:20</span> 早 自 习&nbsp <span class='room'>307</span></div>" +
                "<div id='c2'><span class='time'>08:30</span> 数据结构 <span class='room'>211</span></div>" +
                "<div id='c3'><span class='time'>14:00</span> <span class='notice'><a>双周</a></span>操作系统 <span class='room'>101</span></div>";break;
            case 5:content="<div id='c1'><span class='time'>07:20</span> 早 自 习&nbsp <span class='room'>307</span></div>" +
                "<div id='c2'><span class='time'>08:30</span> 面向对象 <span class='room'>401</span></div> " +
                "<div id='c3'><span class='time'>14:00</span> javaWeb <span class='room'>311</span></div>";break;
            case 6:content="应该，没课";break;
        }
        for(var i=0;i<7;i++){
            (week==i)&&(week=cns[i]);
        }
        obj.innerHTML=content;
        document.title="星期"+week;
    }
</script>
</html>